<template>
    <a-badge :count="count" :title="short" :number-style="{
      backgroundColor: '#fff',
      color: '#333',
      boxShadow: '0 0 0 1px #d9d9d9 inset',
    }">
        <a-avatar
            shape="square"
            :style="{backgroundColor: statusColor}">
            {{name.toUpperCase()}}
        </a-avatar>
    </a-badge>
</template>

<script>
const colorMap = {
    'success': '#87d068',
    'error': '#f50',
    'pending': '#2db7f5',
    'processing': '#108ee9',
    'warning': '#fffbe6',
    'default': '#001529'
}
export default {
    name: 'DbAvatar',
    props: {
        count: Number,
        status: String,
        name: String,
        short: String,
    },
    components: {},
    created(){
        
    },
    data(){
        return {
            
        }
    },
    computed:{
        statusColor(){
            const c = colorMap[this.status]
            if(c==undefined) return colorMap['default']
            else return c
        },

    }
}
</script>

<style scoped>
div{
    padding: 10px;
}
</style>
